<template>
  <div id="mainlogin">
    <div class="mini-login">
      <img
        class="mini-login-img"
        src="../../assets/img/mini-login.png"
        alt=""
        srcset=""
      >
      <div class="login-title">登录窗口</div>
      <div class="login-subtitle">{{ title }}</div>

      <div class="tagBall">
        <a
          class="tag"
          target="_blank"
          href="https://shop.zbj.com/21309029/"
        >微信小程序</a>
        <a
          class="tag"
          target="_blank"
          href="https://shop.zbj.com/21309029/"
        >支付宝小程序</a>
        <a
          class="tag"
          target="_blank"
          href="https://shop.zbj.com/21309029/"
        >抖音小程序</a>
        <a
          class="tag"
          target="_blank"
          href="https://shop.zbj.com/21309029/"
        >百度小程序</a>
        <a
          class="tag"
          target="_blank"
          href="https://shop.zbj.com/21309029/"
        >钉钉小程序</a>
        <a
          class="tag"
          target="_blank"
          href="https://shop.zbj.com/21309029/"
        >网站开发</a>
        <a
          class="tag"
          target="_blank"
          href="https://shop.zbj.com/21309029/"
        >官网建设</a>
        <a
          class="tag"
          target="_blank"
          href="https://shop.zbj.com/21309029/"
        >外卖配送</a>
        <a
          class="tag"
          target="_blank"
          href="https://shop.zbj.com/21309029/"
        >后台管理</a>
        <a
          class="tag"
          target="_blank"
          href="https://shop.zbj.com/21309029/"
        >APP开发</a>
        <a
          class="tag"
          target="_blank"
          href="https://shop.zbj.com/21309029/"
        >安卓原生</a>
        <a
          class="tag"
          target="_blank"
          href="https://shop.zbj.com/21309029/"
        >IOS原生</a>
        <a
          class="tag"
          target="_blank"
          href="https://shop.zbj.com/21309029/"
        >企业管理软件</a>
        <a
          class="tag"
          target="_blank"
          href="https://shop.zbj.com/21309029/"
        >DIY设计软件</a>
        <a
          class="tag"
          target="_blank"
          href="https://shop.zbj.com/21309029/"
        >抽奖助手</a>
        <a
          class="tag"
          target="_blank"
          href="https://shop.zbj.com/21309029/"
        >长安智联</a>
        <a
          class="tag"
          target="_blank"
          href="https://shop.zbj.com/21309029/"
        >充电宝租借</a>
        <a
          class="tag"
          target="_blank"
          href="https://shop.zbj.com/21309029/"
        >抖音分销</a>
        <a
          class="tag"
          target="_blank"
          href="https://shop.zbj.com/21309029/"
        >找活发活平台</a>
        <a
          class="tag"
          target="_blank"
          href="https://shop.zbj.com/21309029/"
        >淘宝联盟</a>
        <a
          class="tag"
          target="_blank"
          href="https://shop.zbj.com/21309029/"
        >租车平台</a>
        <!-- ------------------------------------------------------------------------------------------ -->
        <a
          class="tab"
          target="_blank"
          style="background-image: url('ethan.png')"
          href="https://shop.zbj.com/21309029/"
        />
        <!-- ------------------------------------------------------------------------------------------ -->
        <a
          class="tag"
          target="_blank"
          href="https://shop.zbj.com/21309029/"
        >POS机代扣</a>
        <a
          class="tag"
          target="_blank"
          href="https://shop.zbj.com/21309029/"
        >分销平台</a>
        <a
          class="tag"
          target="_blank"
          href="https://shop.zbj.com/21309029/"
        >CRM管理平台</a>
        <a
          class="tag"
          target="_blank"
          href="https://shop.zbj.com/21309029/"
        >论坛</a>
        <a
          class="tag"
          target="_blank"
          href="https://shop.zbj.com/21309029/"
        >社交</a>
        <a
          class="tag"
          target="_blank"
          href="https://shop.zbj.com/21309029/"
        >相亲</a>
        <a
          class="tag"
          target="_blank"
          href="https://shop.zbj.com/21309029/"
        >交友</a>
        <a
          class="tag"
          target="_blank"
          href="https://shop.zbj.com/21309029/"
        >家政服务</a>
        <a
          class="tag"
          target="_blank"
          href="https://shop.zbj.com/21309029/"
        >上门预约</a>
        <a
          class="tag"
          target="_blank"
          href="https://shop.zbj.com/21309029/"
        >会员管理</a>
        <a
          class="tag"
          target="_blank"
          href="https://shop.zbj.com/21309029/"
        >租借系统</a>
        <a
          class="tag"
          target="_blank"
          href="https://shop.zbj.com/21309029/"
        >电商售卖</a>
        <a
          class="tag"
          target="_blank"
          href="https://shop.zbj.com/21309029/"
        >社区拼团</a>
        <a
          class="tag"
          target="_blank"
          href="https://shop.zbj.com/21309029/"
        >积分兑换</a>
        <a
          class="tag"
          target="_blank"
          href="https://shop.zbj.com/21309029/"
        >数据统计</a>
        <a
          class="tag"
          target="_blank"
          href="https://shop.zbj.com/21309029/"
        >用户画像</a>
        <a
          class="tag"
          target="_blank"
          href="https://shop.zbj.com/21309029/"
        >人脸识别</a>
        <a
          class="tag"
          target="_blank"
          href="https://shop.zbj.com/21309029/"
        >实名认证</a>
        <a
          class="tag"
          target="_blank"
          href="https://shop.zbj.com/21309029/"
        >信用系统</a>
        <a
          class="tag"
          target="_blank"
          href="https://shop.zbj.com/21309029/"
        >人机对话</a>
        <a
          class="tag"
          target="_blank"
          href="https://shop.zbj.com/21309029/"
        >硬件互联</a>
        <a
          class="tag"
          target="_blank"
          href="https://shop.zbj.com/21309029/"
        >共享打印</a>
        <a
          class="tag"
          target="_blank"
          href="https://shop.zbj.com/21309029/"
        >联合办公</a>
        <a
          class="tag"
          target="_blank"
          href="https://shop.zbj.com/21309029/"
        >ERP进销存</a>
        <a
          class="tag"
          target="_blank"
          href="https://shop.zbj.com/21309029/"
        >文字识别</a>
      </div>

      <div class="earth">
        <img class="earth-img" src="../../assets/img/earth.png">
      </div>

      <div class="login-form">
        <div class="form-item">
          <div class="form-icon">
            <img
              class="user-icon"
              src="../../assets/img/user-icon.png"
              alt=""
              srcset=""
            >
          </div>
          <input v-model="loginForm.username" class="form-input">
        </div>
        <div class="form-item password">
          <div class="form-icon">
            <img
              class="user-icon"
              src="../../assets/img/password-icon.png"
              alt=""
              srcset=""
            >
          </div>
          <input
            v-model="loginForm.password"
            class="form-input"
            type="password"
          >
        </div>
        <div class="code">
          <div class="code-left">
            <div class="form-icon">
              <img
                class="user-icon"
                src="../../assets/img/code-icon.png"
                alt=""
                srcset=""
              >
            </div>
            <input v-model="loginForm.code" maxlength="4" class="form-input2">
          </div>
          <div class="code-right">
            <canvas
              id="canvas"
              width="160px"
              height="55px"
              @click="refresh(2)"
            />
          </div>
        </div>
        <div class="submit" @click="submit">登录</div>
      </div>
    </div>
    <div class="tips">
      <div class="sefg" @click="goto1">
        技术支持 ©重庆印留时光创新科技有限公司
      </div>
      <div class="fefg" @click="goto2">{{ ba.record_number }}</div>
    </div>
  </div>
</template>

<script>
import { validUsername } from '@/utils/validate'
import SocialSign from './components/SocialSignin'
const settings = require('../../settings.js')
// console.log(settings)

export default {
  name: 'Login',
  components: { SocialSign },
  data() {
    var checkCode = (rule, value, callback) => {
      const newvalue = value.toLowerCase()
      let aa = this.myCode
      aa = aa.toLowerCase()
      console.log('lllllllllllllllllllllll')
      console.log(newvalue, aa)
      if (newvalue == aa) {
        callback()
      } else {
        callback(new Error('验证码错误'))
      }
    }
    const validateUsername = (rule, value, callback) => {
      if (!validUsername(value)) {
        callback()
      } else {
        callback()
      }
    }
    const validatePassword = (rule, value, callback) => {
      if (value.length < 1) {
        callback(new Error('The password can not be less than 6 digits'))
      } else {
        callback()
      }
    }
    return {
      ba: '',
      title: '', // 标题
      myCode: '',
      loginForm: {
        username: '',
        password: '',
        code: ''
      },
      loginRules: {
        username: [
          { required: true, trigger: 'blur', validator: validateUsername }
        ],
        password: [
          { required: true, trigger: 'blur', validator: validatePassword }
        ],
        code: [{ trigger: 'blur', validator: checkCode }]
      },
      passwordType: 'password',
      capsTooltip: false,
      loading: false,
      showDialog: false,
      redirect: undefined,
      otherQuery: {}
    }
  },
  watch: {
    $route: {
      handler: function(route) {
        const query = route.query
        if (query) {
          this.redirect = query.redirect
          this.otherQuery = this.getOtherQuery(query)
        }
      },
      immediate: true
    }
  },
  created() {
    this.$httpajax('/login/record_info').then((res) => {
      console.log(res)
      this.ba = res.data.datas
    })
    this.title = settings.title
    // window.addEventListener('storage', this.afterQRScan)
    this.refresh(1)
  },
  mounted() {
    this.$nextTick((e) => {
      var tagEle =
          'querySelectorAll' in document
            ? document.querySelectorAll('.tag')
            : getClass('tag')
      var paper =
          'querySelectorAll' in document
            ? document.querySelector('.tagBall')
            : getClass('tagBall')[0]
      var RADIUS = 300
      var fallLength = 500
      var tags = []
      var angleX = Math.PI / 500
      var angleY = Math.PI / 500
      var CX = paper.offsetWidth / 2
      var CY = paper.offsetHeight / 2
      var EX =
        paper.offsetLeft +
        document.body.scrollLeft +
        document.documentElement.scrollLeft
      var EY =
        paper.offsetTop +
        document.body.scrollTop +
        document.documentElement.scrollTop

      function getClass(className) {
        var ele = document.getElementsByTagName('*')
        var classEle = []
        for (var i = 0; i < ele.length; i++) {
          var cn = ele[i].className
          if (cn === className) {
            classEle.push(ele[i])
          }
        }
        return classEle
      }

      function innit() {
        for (var i = 0; i < tagEle.length; i++) {
          var a, b
          var k = (2 * (i + 1) - 1) / tagEle.length - 1
          var a = Math.acos(k)
          var b = a * Math.sqrt(tagEle.length * Math.PI)
          // var a = Math.random()*2*Math.PI;
          // var b = Math.random()*2*Math.PI;
          var x = RADIUS * Math.sin(a) * Math.cos(b)
          var y = RADIUS * Math.sin(a) * Math.sin(b)
          var z = RADIUS * Math.cos(a)
          var t = new tag(tagEle[i], x, y, z)
          // tagEle[i].style.color = "rgb("+parseInt(Math.random()*255)+","+parseInt(Math.random()*255)+","+parseInt(Math.random()*255)+")";
          tagEle[i].style.color =
            'rgba(' +
            parseInt(255) +
            ',' +
            parseInt(255) +
            ',' +
            parseInt(255) +
            ',0.8)'
          tags.push(t)
          t.move()
        }
      }

      function animate1() {
        setInterval(function() {
          rotateX()
          rotateY()
          tags.forEach(function(e) {
            mymove(e)
            // e.move();
          })
        }, 1000 / 60)
      }

      if ('addEventListener' in window) {
        paper.addEventListener('mousemove', function(event) {
          var x = event.clientX - EX - CX
          var y = event.clientY - EY - CY
          // angleY = -x* (Math.sqrt(Math.pow(x , 2) + Math.pow(y , 2)) > RADIUS/4 ? 0.0002 : 0.0001);
          // angleX = -y* (Math.sqrt(Math.pow(x , 2) + Math.pow(y , 2)) > RADIUS/4 ? 0.0002 : 0.0001);
          angleY = x * 0.0001
          angleX = y * 0.0001
        })
      } else {
        paper.attachEvent('onmousemove', function(event) {
          var x = event.clientX - EX - CX
          var y = event.clientY - EY - CY
          angleY = x * 0.0001
          angleX = y * 0.0001
        })
      }

      function rotateX() {
        var cos = Math.cos(angleX)
        var sin = Math.sin(angleX)
        tags.forEach(function(e) {
          var y1 = e.y * cos - e.z * sin
          var z1 = e.z * cos + e.y * sin
          e.y = y1
          e.z = z1
        })
      }

      function rotateY() {
        var cos = Math.cos(angleY)
        var sin = Math.sin(angleY)
        tags.forEach(function(e) {
          var x1 = e.x * cos - e.z * sin
          var z1 = e.z * cos + e.x * sin
          e.x = x1
          e.z = z1
        })
      }

      var tag = function(ele, x, y, z) {
        this.ele = ele
        this.x = x
        this.y = y
        this.z = z
      }
      function mymove(e) {
        var scale = fallLength / (fallLength - e.z)
        var alpha = (e.z + RADIUS) / (2 * RADIUS)
        e.ele.style.fontSize = 9 * scale + 'px'
        e.ele.style.opacity = alpha + 0.5
        e.ele.style.filter = 'alpha(opacity = ' + (alpha + 0.5) * 100 + ')'
        e.ele.style.zIndex = parseInt(scale * 100)
        e.ele.style.left = e.x + CX - e.ele.offsetWidth / 2 + 'px'
        e.ele.style.top = e.y + CY - e.ele.offsetHeight / 2 + 'px'
      }

      tag.prototype = {
        move: function() {
          var scale = fallLength / (fallLength - this.z)
          var alpha = (this.z + RADIUS) / (2 * RADIUS)
          this.ele.style.fontSize = 9 * scale + 'px'
          this.ele.style.opacity = alpha + 0.5
          this.ele.style.filter =
            'alpha(opacity = ' + (alpha + 0.5) * 100 + ')'
          this.ele.style.zIndex = parseInt(scale * 100)
          this.ele.style.left = this.x + CX - this.ele.offsetWidth / 2 + 'px'
          this.ele.style.top = this.y + CY - this.ele.offsetHeight / 2 + 'px'
        }
      }
      innit()
      animate1()
    })
  },
  destroyed() {
    // window.removeEventListener('storage', this.afterQRScan)
  },
  methods: {
    goto1() {
      window.location.href = 'https://shop.zbj.com/21309029/'
    },
    goto2() {
      window.location.href = this.ba.record_url
    },
    // 刷新验证码
    refresh(typeMsg) {
      const _self = this
      if (typeMsg == 2) {
        this.$message.success('图片验证码刷新成功')
      }

      this.$nextTick(() => {
        /** 生成一个随机数**/
        function randomNum(min, max) {
          return Math.floor(Math.random() * (max - min) + min)
        }
        /** 生成一个随机色**/
        function randomColor(min, max) {
          var r = randomNum(min, max)
          var g = randomNum(min, max)
          var b = randomNum(min, max)
          return 'rgb(' + r + ',' + g + ',' + b + ')'
        }
        drawPic()

        drawPic()

        /** 绘制验证码图片**/
        function drawPic() {
          var canvas = document.getElementById('canvas')
          var width = canvas.width
          var height = canvas.height
          var ctx = canvas.getContext('2d')
          ctx.textBaseline = 'bottom'

          /** 绘制背景色**/
          ctx.fillStyle = randomColor(180, 240) // 颜色若太深可能导致看不清
          ctx.fillRect(0, 0, width, height)
          /** 绘制文字**/
          var str = 'ABCEFGHJKLMNPQRSTWXY123456789'
          let mycode = ''
          for (var i = 0; i < 4; i++) {
            var txt = str[randomNum(0, str.length)]
            mycode += txt
            ctx.fillStyle = randomColor(50, 160) // 随机生成字体颜色
            ctx.font = randomNum(25, 42) + 'px SimHei' // 随机生成字体大小
            var x = 10 + i * 30
            var y = randomNum(42, 50)
            var deg = randomNum(-15, 15)
            // 修改坐标原点和旋转角度
            ctx.translate(x, y)

            ctx.rotate((deg * Math.PI) / 180)
            ctx.fillText(txt, 0, 0)
            // 恢复坐标原点和旋转角度
            ctx.rotate((-deg * Math.PI) / 180)
            ctx.translate(-x, -y)
          }

          _self.myCode = mycode.toLowerCase()

          /** 绘制干扰线**/
          // for (var i = 0; i < 8; i++) {
          //   ctx.strokeStyle = randomColor(40, 180);
          //   ctx.beginPath();
          //   ctx.moveTo(randomNum(0, width), randomNum(0, height));
          //   ctx.lineTo(randomNum(0, width), randomNum(0, height));
          //   ctx.stroke();
          // }
          /** 绘制干扰点**/
          // for (var i = 0; i < 100; i++) {
          //   ctx.fillStyle = randomColor(0, 255);
          //   ctx.beginPath();
          //   ctx.arc(
          //     randomNum(0, width),
          //     randomNum(0, height),
          //     1,
          //     0,
          //     2 * Math.PI
          //   );
          //   ctx.fill();
          // }
          const base64Str = canvas.toDataURL('image/jpg')
          _self.codesrc = base64Str
        }
      })
    },
    send(done) {
      this.$message.success('验证码发送成功')
      done()
    },
    // 提交报道
    submit() {
      // this.$message.success(JSON.stringify(form));

      if (this.loginForm.username.trim() == '') {
        this.$notify({
          title: '警告',
          message: '用户名不能为空',
          type: 'warning'
        })
        return
      }
      if (this.loginForm.password.trim() == '') {
        this.$notify({
          title: '警告',
          message: '密码不能为空',
          type: 'warning'
        })
        return
      }

      if (this.loginForm.code.trim() == '') {
        this.$notify({
          title: '警告',
          message: '验证码不能为空',
          type: 'warning'
        })
        return
      }
      let bb = this.myCode
      let aa = this.loginForm.code
      bb = bb.toLowerCase()
      aa = aa.toLowerCase()

      if (aa != bb) {
        this.refresh(1)
        this.$notify({
          title: '警告',
          message: '验证码错误',
          type: 'warning'
        })
        return
      }

      console.log('提交表单', this.loginForm)

      this.$store
        .dispatch('user/login', this.loginForm)
        .then(() => {
          this.$router.push(
            // path: this.redirect || "/",
            { path: 'dashboard' }
            // query: this.otherQuery,
          )
          this.loading = false
        })
        .catch(() => {
          this.refresh(1)
          this.loading = false
        })
    },
    checkCapslock(e) {
      const { key } = e
      this.capsTooltip = key && key.length === 1 && key >= 'A' && key <= 'Z'
    },
    showPwd() {
      if (this.passwordType === 'password') {
        this.passwordType = ''
      } else {
        this.passwordType = 'password'
      }
      this.$nextTick(() => {
        this.$refs.password.focus()
      })
    },
    handleLogin() {
      this.$refs.loginForm.validate((valid) => {
        if (valid) {
          this.loading = true
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    getOtherQuery(query) {
      return Object.keys(query).reduce((acc, cur) => {
        if (cur !== 'redirect') {
          acc[cur] = query[cur]
        }
        return acc
      }, {})
    }
  }
}
</script>

<style scoped lang="scss">
.sefg {
  cursor: pointer;
}
.fefg {
  cursor: pointer;
}
.tips {
  position: absolute;
  bottom: 30px;
  line-height: 1.5;
  font-size: 18px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #97e3f4;
  text-align: center;
}

/* 修复input 背景不协调 和光标变色 */
/* Detail see https://github.com/PanJiaChen/vue-element-admin/pull/927 */
#mainlogin {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  background: url(../../assets/img/login-bg.png) no-repeat;
  background-size: cover;
  align-items: center;
}
.mini-login {
  transform: scale(0.8);
  z-index: 2;
  width: 1191px;
  height: 801px;
  // background: url(../../assets/img/mini-login.png) no-repeat;
  // background-size: cover;
  position: relative;
}
.mini-login-img {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 2;
}
.login-title {
  font-size: 30px;
  font-weight: 500;
  color: #2fd5ff;
  position: absolute;
  // left: 532px;
  left: 50%;
  text-align: center;
  transform: translateX(-50%);
  top: 155px;
  z-index: 3;
}
.login-subtitle {
  font-size: 32px;
  z-index: 3;
  font-weight: 400;
  color: #97e3f4;
  left: 50%;
  text-align: center;
  transform: translateX(-50%);
  top: 227px;
  position: absolute;
}
.earth {
  width: 285px;
  height: 270px;
  position: absolute;
  top: 305px;
  left: 218px;
  // background: url(../../assets/img/earth.png) no-repeat;
}
.earth-img {
  position: relative;
  z-index: 1;
}

.login-form {
  width: 381px;
  height: 320px;
  position: absolute;
  top: 299px;
  left: 640px;
  z-index: 3;
}
.form-item {
  align-items: center;
  display: flex;
  width: 380px;
  height: 58px;
  background: rgba(18, 211, 252, 0.04);
  border: 1px solid #134b7e;
}
.form-item.password {
  margin-top: 25px;
}
.code {
  margin-top: 24px;
  width: 380px;
  height: 58px;
  display: flex;
}
.code-right {
  width: 161px;
  height: 58px;
  background: rgba(18, 211, 252, 0);
  border: 1px solid #134b7e;
  margin-left: 9px;
}
.code-left {
  width: 211px;
  height: 58px;
  background: rgba(18, 211, 252, 0.04);
  border: 1px solid #134b7e;
  display: flex;

  align-items: center;
}
.submit {
  width: 381px;
  height: 58px;
  background: #006cc6;
  border: 1px solid #134b7e;
  margin-top: 38px;
  font-size: 25px;
  font-weight: 400;
  color: #b5e1f7;
  text-align: center;
  line-height: 58px;
  font-family: FZZhengHeiS-DB-GB;
  cursor: pointer;
  -webkit-user-select: none;

  -moz-user-select: none;

  -ms-user-select: none;

  user-select: none;
}
.form-icon {
  width: 58px;
  height: 54px;
  background: #124671;
  display: flex;
  align-items: center;
  justify-content: center;
}
.user-icon {
  width: 28px;
  height: 28px;
}
.form-input {
  background: transparent;
  outline: none;
  border: none;
  color: #a4d6ef;

  padding: 10px 0;
  padding-left: 10px;
}
.form-input2 {
  background: transparent;
  outline: none;
  border: none;
  color: #a4d6ef;
  width: 100px;
  padding: 10px 0;
  padding-left: 20%;
}

// 球
.tagBall {
  width: 800px;
  z-index: 2;
  height: 800px;
  position: fixed;
  left: -39px;
  top: 50px;
  transform: scale(0.6);
}

.tag {
  display: block;
  position: absolute;
  left: 0px;
  top: 0px;
  color: #000;
  text-decoration: none;
  font-size: 1px;
  font-family: "微软雅黑";
  font-weight: 500;
}

.tag:hover {
  border: 1px solid #666;
}

@-webkit-keyframes rotate {
  100% {
    -webkit-transform: rotateX(360deg) rotateY(720deg) rotateZ(360deg);
    transform: rotateX(360deg) rotateY(720deg) rotateZ(360deg);
  }
}

@keyframes rotate {
  100% {
    -webkit-transform: rotateX(360deg) rotateY(720deg) rotateZ(360deg);
    transform: rotateX(360deg) rotateY(720deg) rotateZ(360deg);
  }
}

.main {
  position: fixed;
  text-align: center;
  top: 182px;
  width: 100%;
  height: auto;
  display: flex;
  justify-content: center;
}

@keyframes dynamics {
  0% {
    background-position: 0% 0%;
  }
  50% {
    background-position: 50% 100%;
  }
  100% {
    background-position: 100% 0%;
  }
}
</style>

